<!DOCTYPE html>
<html lang="utf-8">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">@media print {  .gmnoprint {    display:none  }}@media screen {  .gmnoscreen {    display:none  }}</style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title> {% block title %} {{ username }} - 我的紀錄 {% endblock %}</title>
    {% block scripts %}
        <script type="text/javascript" src="static/js/jquery.js"></script>
        <script type="text/javascript" src="static/js/bootstrap-modal.js"></script>
        <script type="text/javascript" src="static/js/bootstrap-carousel.js"></script>
        <script type="text/javascript" src="static/js/jquery.min.js"></script>
        <script type="text/javascript" src="static/js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="static/js/bootstrap.min.js"></script>    
        <script type="text/javascript" src="static/js/bootstrap-datepicker.js"></script>
        <script type="text/javascript" src="static/js/jquery.tagsinput.js"></script>
        <script type="text/javascript" src="static/js/jdashboard.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="static/js/main.js"></script>
    {% endblock %}

    <!-- jquery-ui -->
    {% block styles %}
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">

        <!-- bootstrap css -->
        <link href="static/css/bootstrap.css" rel="stylesheet">
        <link href="static/css/style.css" rel="stylesheet">
        <link href="static/css/datepicker.css" rel="stylesheet">

        <!-- base css -->
        <link class="links-css" href="static/css/base.css" rel="stylesheet">

        <!-- home page css -->
        <link href="static/css/home-page.css" rel="stylesheet">

        <!-- taginput -->
        <link rel="stylesheet" type="text/css" href="static/css/jquery.tagsinput.css" />
        
        <style type="text/css">
          body {
            padding-top: 40px;
            padding-bottom: 40px;
          }
          .sidebar-nav {
            padding: 9px 0;
          }
        </style>

        <style>
        .ui-autocomplete-loading { background: white url('http://jqueryui.com/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
        </style>

        <!-- responsive css -->
        <link href="static/css/bootstrap-responsive.css" rel="stylesheet">
        <!-- media query css -->
        <link href="static/css/media-fluid.css" rel="stylesheet">

         <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
         <!--[if lt IE 9]>
         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
         <![endif]-->

         <!-- Le fav and touch icons -->
         <link rel="shortcut icon" href="static/ico/favicon.ico">
     {% endblock %}
  </head>
  <body>

    <div id="header">
      {% block header %} {% include "loginheader.html" %} {% endblock %}
    </div> <!-- navbar -->
   <!-- only for desktop
  =============================== -->
    <div id="maincontainer" class="left-sb-fluid">
      <div id="contentwrapper">
        <div id= "leftpanel">
          {% block sidebar %}{% include "sidebar.html" %} {% endblock %}
        </div>
        <div id="content">{% block content %} {% endblock %}
        </div>
      </div>
    </div>

    <!--生理記錄填寫表單-->
    {% block modal %}
    <div class="modal hide" id="normal">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2><font color= "#600000"><i class="icon-edit"></i> 記錄生理狀態，方便觀察病症！</font></h2>
      </div>
      <div class="modal-body">
        <form action="/add_report" name="add_report" id="report" method="POST" accept-charset="UTF-8">
          <div class="input-append date" id="date_report_minding" data-date="{{ today }}" data-date-format="yyyy-mm-dd">
          <i class="icon-chevron-right"></i> 日期：  <input class="span2" name="report_date" size="16" type="text" value="{{ today }}" >
          <span class="add-on"><i class="icon-calendar"></i></span>
          </div>
          <i class="icon-chevron-right"></i> 體重： <input id="#" type="number" name="term" /> kg <br> 
          <i class="icon-chevron-right"></i> 體脂：<input id="#" type="number" name="term" /> % <br>
          <i class="icon-chevron-right"></i> 血壓：<br>
            收縮壓： <input id="#" type="number" name="term" /> mmHg <br>
            舒張壓： <input id="#" type="number" name="term" /> mmHg <br>
          <i class="icon-chevron-right"></i> 脈搏（心跳）：
          <input id="#" type="number" name="term" /> 次/分 <br>
          <i class="icon-chevron-right"></i> 體溫：
          <input id="#" type="number" name="term" /> ℃ <br>
          <div class="input-append date" id="date_report_period" data-date="{{ today }}" data-date-format="yyyy-mm-dd">
          <i class="icon-chevron-right"></i> 最近一次生理期：  <input class="span2" name="report_date" size="16" type="text" value="{{ today }}" >
          <span class="add-on"><i class="icon-calendar"></i></span>
          </div>
          <i class="icon-chevron-right"></i> 生理感受：
          <table class="table">
            <thead>
              <tr>
                <th> <i class=" icon-thumbs-down"></i> <i class=" icon-thumbs-down"></i> 很糟</th>
                <th> <i class=" icon-thumbs-down"></i> 糟</th>
                <th> 普通</th>
                <th> <i class=" icon-thumbs-up"></i> 好</th>
                <th> <i class=" icon-thumbs-up"></i> <i class=" icon-thumbs-up"></i> 很好</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <label class="radio" align="middle">
                    <input type="radio" name="optionRadio" id="verybad" value="verybad" >
                  </label>
                </td> 
                <td>
                  <label class="radio">
                    <input type="radio" name="optionRadio" id="bad" value="bad">
                  </label>
                </td>
                <td>
                  <label class="radio">
                    <input type="radio" name="optionRadio" id="soso" value="soso" checked>
                  </label>
                </td>
                <td>
                  <label class="radio">
                    <input type="radio" name="optionRadio" id="good" value="good">
                  </label>
                </td> 
                <td>
                  <label class="radio">
                    <input type="radio" name="optionRadio" id="verygood" value="verygood">
                  </label>
                </td>
              </tr>
            </tody>
          </table>                                     
        </form> <!-- add_report end -->
      </div> <!-- modal-body end -->
      <div class="modal-footer">
        <input id="search_input" class="btn btn-primary" type="submit" value="按我新增記錄" />
        <a href="#" class="btn" data-dismiss="modal">Close</a>
      </div>
    </div> <!-- modal hide end -->
    {% endblock %}

    <!--用藥記錄填寫表單-->
    {% block modal1 %}
    <div class="modal hide" id="medicine">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2><font color= "#600000"><i class="icon-edit"></i> 記錄用藥情形，有效管理病情！</font></h2>
      </div>
      <div class="modal-body">
        <form action="/add_report" name="medicine" id="report" method="POST" accept-charset="UTF-8">
          <i class="icon-folder-open"></i> 請選擇你要記錄的病症：
          <textarea class="input-xlarge" id="add_medicine_disease_name" name="my_disease_name" row="3"> {{ my_disease_name }} </textarea><br>
          <div class="input-append date" id="date_report_medicine" data-date="{{ today }}" data-date-format="yyyy-mm-dd">
          <i class="icon-chevron-right"></i> 用藥日期： <input class="span2" name="report_date" size="16" type="text" value="{{ today }}" >
          <span class="add-on"><i class="icon-calendar"></i></span>
          </div>
          <div class="input-append time" id="time_report" data-date="{{ now }}" data-date-format="hh">
          <i class="icon-chevron-right"></i> 用藥時間： <input class="span2" name="report_time" size="16" type="text" value="{{ now }}" >
          <span class="add-on"><i class="icon-time"></i></span>
          </div>
          <i class="icon-chevron-right"></i> 用藥明細：

              <!-- 暫時的 -->
              {% for i in my_last_medicine_report %}
                 <!-- level1: {{ i }} ---- {{ i.Id }}<br> -->
                {% for j in i %}
                  level2: {{ j.key.id }} ---- {{ j.disease_name }} ---- {{ j.medicine }} ---- {{ j.dosage }}<hr>
                {% endfor %}
              {% endfor %}

          <table class="table">
            <thead>
              <tr>

                <th><i class="icon-tag"></i> 藥名</th>
                <th><i class="icon-tint"></i> 劑量</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 
                  <input id="search_medicine1" type="text" name="term_medicine_name" /> 
                </td>
                <td>
                  <input id="#" type="number" name="term_dosage" />
                </td>
              </tr>
              <tr>
                <td> 
                  <input id="search_medicine2" type="text" name="term_medicine_name" /> 
                </td>
                <td>
                  <input id="#" type="number" name="term_dosage" />
                </td>
              </tr>
              <tr>
                <td> 
                  <input id="search_medicine3"  type="text" name="term_medicine_name" /> 
                </td>
                <td>
                  <input id="#" type="number" name="term_dosage" />
                </td>
                <td><button class="btn btn-mini"><i class="icon-white icon-plus-fsign"></i></button>
                </td>
              </tr>
            </tbody>
          </table>
          <i class="icon-chevron-right"></i> 副作用： <textarea class="input-xlarge" id="search_side_effect" name="my_side_effect" row="3"></textarea>

          <div class="modal-footer">
            <input id="search_input" class="btn btn-primary" type="submit" value="按我新增記錄" />
            <a href="#" class="btn" data-dismiss="modal">Close</a>
          </div>

        </form> <!-- add_report end -->
      </div> <!-- modal-body end -->
    </div> <!-- modal hide end -->
    {% endblock %}

    <!--檢查記錄填寫表單-->
    {% block modal2 %}
    <div class="modal hide" id="exam">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2><font color= "#600000"><i class="icon-edit"></i> 記下檢查結果，有效追蹤病理狀態！</font></h2>
      </div>
      <div class="modal-body">
        <form action="/add_report" name="add_report" id="report" method="POST" accept-charset="UTF-8">
          <i class="icon-folder-open"></i> 請選擇你要記錄的病症：
          <textarea class="input-xlarge" id="add_exam_disease_name" row="3"> {{ my_disease_name }} </textarea><br>
          <div class="input-append date" id="date_report_exam" data-date="{{ today }}" data-date-format="yyyy-mm-dd">
          <i class="icon-chevron-right"></i> 檢查日期： <input class="span2" name="report_date" size="16" type="text" value="{{ today }}" >
          <span class="add-on"><i class="icon-calendar"></i></span>
          </div>
           <i class="icon-chevron-right"></i> 檢查地點： <input id="#" type="text" name="term" /> <br>
          <i class="icon-chevron-right"></i> 檢查報告：
          <table class="table">
            <thead>
              <tr>
                <th><i class="icon-tag"></i> 內容</th>
                <th><i class="icon-tint"></i> 數值</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 
                  <input id="search_medicine" type="text" name="term" /> 
                </td>
                <td>
                  <input id="#" type="number" name="term" />
                </td>
                <td>
                </td>
              </tr>
              <tr>
                <td> 
                  <input id="search_medicine" type="text" name="term" /> 
                </td>
                <td>
                  <input id="#" type="number" name="term" />
                </td>
                <td>
                </td>
              </tr>
              <tr>
                <td> 
                  <input id="search_medicine"  type="text" name="term" /> 
                </td>
                <td>
                  <input id="#" type="number" name="term" />
                </td>
                <td><button class="btn btn-mini"><i class="icon-white icon-plus-sign"></i></button>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="modal-footer">
            <input id="search_input" class="btn btn-primary" type="submit" value="按我新增記錄" />
            <a href="#" class="btn" data-dismiss="modal">Close</a>
          </div> 
        </form> <!-- add_report end -->
      </div> <!-- modal-body end -->    
    </div> <!-- modal hide end -->
    {% endblock %}


    <!--圖片記錄填寫表單-->
    {% block modal3 %}
    <div class="modal hide" id="photo">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2><font color= "#600000"><i class="icon-edit"></i> 透過圖像記錄，掌握症狀發展！</font></h2>
      </div>
      <div class="modal-body">
        <form action="/add_report" name="add_report" id="report" method="POST" accept-charset="UTF-8">
          <i class="icon-folder-open"></i> 請選擇你要記錄的病症：
          <textarea class="input-xlarge" id="add_picture_disease_name" row="3"> {{ my_disease_name }} </textarea><br>
          <div class="input-append date" id="date_report_photo" data-date="{{ today }}" data-date-format="yyyy-mm-dd">
          <i class="icon-chevron-right"></i> 記錄日期： <input class="span2" name="report_date" size="16" type="text" value="{{ today }}" >
          <span class="add-on"><i class="icon-calendar"></i></span>
          </div>
          <div class="controls">
            <i class="icon-chevron-right"></i> 圖像上傳：
            <i class="icon-file"></i>  <input class="input-file" id="fileInput" type="file"><br>
          </div> 
          <i class="icon-chevron-right"></i> 備註說明： <textarea class="input-xlarge" id="exam_comment" row="3"></textarea>
          <div class="modal-footer">
            <input id="search_input" class="btn btn-primary" type="submit" value="按我新增記錄" />
            <a href="#" class="btn" data-dismiss="modal">Close</a>
          </div>  
        </form> <!-- add_report end -->
      </div> <!-- modal-body end -->
    </div> <!-- modal hide end -->
    {% endblock %}


    <!--新增病症表-->


    
    {% block modal4 %}
    <div class="modal hide" id="addcondition">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2><font color= "#600000"><i class="icon-edit"></i> 新增你要追蹤觀察的病症：</font></h2>
      </div>
      <div class="modal-body">
        <form action="/add_report" name="add_report" id="report" method="POST" accept-charset="UTF-8">
          <i class="icon-folder-open"></i> 新增病症： 
          <textarea class="input-xlarge" id="add_new_disease_name" value="" row="3"></textarea><br>
          <div class="input-append date" id="date_report_addcondition" data-date="{{ today }}" data-date-format="yyyy-mm-dd">
          </div> 
          <div class="modal-footer">
            <a class="btn btn-success" href="#medicine"><i class="icon-bar-chart icon-white"></i> 用藥記錄 </a>
            <a class="btn btn-primary" href="#exam"><i class="icon-check icon-white"></i> 檢查記錄 </a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
          </div> 
        </form> <!-- add_report end -->
      </div> <!-- modal-body end -->
      <div class="modal-footer">
        <i class="icon-chevron-right"></i> 下一步...<br>
        <a id="axa" data-toggle="modal" class="btn btn-success" href="#medicine"><i class="icon-bar-chart icon-white"></i> 用藥記錄 </a>
        <a class="btn btn-primary" href="#exam"><i class="icon-check icon-white"></i> 檢查記錄 </a>
        <a href="#" class="btn" data-dismiss="modal">Close</a>
      </div>
    </div> <!-- modal hide end -->
    {% endblock %}





    <div class="clearfix"></div>
    <div id="footer">
      {% include 'footer.html' %} 
    </div>

    <div id="tc_container" style="display: none" data="ih"></div>
  </body>
</html>
